<template>
  <el-dialog title="问卷详情" :visible.sync="dialog.dialogVisible" @close="close" :width="dialog.width" @opened="openDialog">
    <el-form ref="form" :model="dialog.form" label-width="80px">
    <el-row>
      <el-form-item label="问卷标题"  >
          <el-input v-model="dialog.form.title" disabled autosize></el-input>
      </el-form-item>
      <el-form-item label="问卷描述">
          <el-input type="textarea" v-model="dialog.form.desc" disabled autosize></el-input>
      </el-form-item>
      
      <el-row>
        <el-col :span="9">
          <el-form-item label="问卷日期:" >
            <el-date-picker v-model="dialog.form.date" disabled  type="datetimerange" 
              range-separator="至"  start-placeholder="开始日期"    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2"><span v-html="'&nbsp;'"></span></el-col>
        <el-col :span="6">
          <el-form-item label="创建时间">
            <p>{{dialog.form.createDate | formatDate }} </p>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否发布:">
            <el-switch active-color="#13ce66" disabled  inactive-color="#ff4949" v-model="dialog.form.status"></el-switch><span v-html="'&nbsp;&nbsp;&nbsp;'"></span> {{dialog.form.status ? "创建并发布问卷":"仅仅创建问卷"}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-row>
    <el-table :data="dialog.form.subject"  border style="width: 100%">
        <el-table-column prop="title" label="题目"  align="center"  width="280"> </el-table-column>
         <el-table-column prop="type" label="类型"  align="center"  width="65"></el-table-column>
        <el-table-column label="必填" width="65"  align="center">
          <template slot-scope="scope" >
            <el-switch v-model="scope.row.must" active-color="#13ce66" inactive-color="#ff4949" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="选项"  align="center">
          <template slot-scope="scope">
            <el-tag  :key="tag.id" v-for="tag in scope.row.options"> {{tag}} </el-tag>
          </template>  
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="dialog.dialogVisible = false">删除此问卷</el-button>
      <el-button type="primary" @click="dialog.dialogVisible = false">关闭此问卷</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref,reactive ,watch} from "@vue/composition-api";
import { formatDate } from "@/utils/stringfilter"; 

export default {
  name: "lookDialog",
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default:()=>{} ,
      must:true
    }
  },
  filters:{
    formatDate
  },  
  setup(props, {attrs, emit, root, refs }) {
    const dialog = reactive({
      dialogVisible : false,
      width: "1200px" ,
      form: {
        
      },
    });
    watch(() => {
      dialog.dialogVisible = props.flag;
    })
    const openDialog = ()=>{
      root.$set(dialog,"form",props.data.value)
    }
    const close = ()=>{
      dialog.dialogVisible = false;
      emit("update:flag", false);
    }
    return {
      dialog ,
      close  ,openDialog  
    };
  }
};
</script>

<style lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    font-size: 14px;
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
